<template>
  <!-- 密码登录 -->
  <div class="login_container">
    <div class="login_box">
      <!-- 登录头像区域-->
      <div class="avatar_box">
        <el-row>
          <el-col :span="12"
            ><div class="span_box_1">
              <span class="title_style">登录</span>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="span_box_2">
              <img
                class="image_style"
                src="../assets/images/crossing.png"
                alt=""
              /></div
          ></el-col>
        </el-row>
      </div>
      <!-- 登录表单区域 -->
      <el-form
        :label-position="labelPosition"
        label-width="0px"
        :model="formLabelAlign"
        class="login_form"
        id="setFont"
      >
        <el-form-item label="手机号码">
          <el-input
            class="el-input_inner"
            v-model="formLabelAlign.phonenumber"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            class="el-input_inner"
            v-model="formLabelAlign.password"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="btns_center">
          <el-button class="loginbutton_style" @click="submitForm()"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item class="btns_center">
          <el-button class="text_click" type="text" @click="signup"
            >注册</el-button
          >
          <span class="split"> | </span>
          <el-button class="text_click" type="text" @click="duanxin"
            >短信登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { postLoginData } from "crm/login/login.js";
import Verify from "vue2-verify";
export default {
  name: "Login",
  components: {
    Verify,
  },
  data() {
    return {
      labelPosition: "top",
      formLabelAlign: {
        phonenumber: "",
        password: "",
        // role: 1,
      },
    };
  },
  methods: {
    duanxin() {
      this.$router.push("/Login");
    },
    signup() {
      this.$router.push("/Signup");
    },
    submitForm() {
      if (this.formLabelAlign.phonenumber == "") {
        this.$message.error("账号不能为空");
        return;
      }
      if (this.formLabelAlign.password == "") {
        this.$message.error("密码不能为空");
        return;
      }
      let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (!phoneReg.test(this.formLabelAlign.phonenumber)) {
        this.$message.error("请填写有效的手机号");
        return false;
      }

      let payload = {};
      payload.phonenumber = this.formLabelAlign.phonenumber;
      payload.password = this.formLabelAlign.password;
      postLoginData(payload)
        .then((res) => {
          if (res.data.status == "OK") {
            alert("登陆成功！");
            console.log(res.data.userid);
            localStorage.setItem("userid", res.data.userid);
            localStorage.setItem("nickname", res.data.nickname);
            // localStorage.setItem("token", res.data.token);
            this.$router.push("/admin/index");
          } else {
            alert(res.data.status);
          }
        })
        .catch((err) => {});
      // }
      // });
    },
  },
};
</script>

<style scoped>
.login_container {
  background-color: #333;
  height: 100%;
}
.login_box {
  background-color: #1e1e1e;
  width: 500px;
  height: 550px;
  border-radius: 18px;
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
}
.avatar_box {
  background-color: #aeaeae;
  width: 500px;
  height: 60px;
  border-radius: 18px 18px 0px 0px;
  position: absolute;
}
.span_box_1 {
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 6px 8px 8px 17px;
}
.span_box_2 {
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 8px 12px 2px 70px;
}
.title_style {
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 36px;
}
.image_style {
  width: 19%;
  height: 20%;
  padding: 5% 5%;
  float: right;
}
/*.text_note{
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  font-size: 35px;
}*/
#setFont >>> .el-form-item__label {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 20px;
  position: relative;
  left: 8%;
}
/deep/.el-input__inner {
  background-color: #282828;
  border: 0;
  height: 60px;
  width: 85%;
  position: relative;
  left: 8%;
}
.el-low_in_el-form-item {
  position: relative;
  left: 3%;
}
.el-col-20 {
  width: 63.33333%;
}
.messagebutton_style {
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #111111;
  font-size: 15px;
}
.loginbutton_style {
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #aeaeae;
  font-size: 35px;
}
.text_click {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 20px;
}
.split {
  color: #eeeeee;
}
.btns_center {
  display: flex;
  justify-content: center;
}
.login_form {
  position: absolute;
  top: 18%;
  bottom: 0;
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box; /* 巧妙 */
}
</style>